<template>
  <view class="swiper-wrapper">
    <swiper
      class="swiper"
      :indicator-dots="false"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in list" :key="index">
        <image class="swiper-img" :src="item.imgUrl" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 自定义指示器 -->
    <view class="custom-indicator">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="dot"
        :class="{ active: index === current }"
      ></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue";
defineProps({
  list: {
    type: Array,
    default: [],
  },
});

const swiperList = ref([
  "/static/images/income1.png",
  "/static/images/income2.png",
  "/static/images/income3.png",
]);

const current = ref(0);

const onSwiperChange = (e: any) => {
  current.value = e.detail.current;
};
</script>

<style lang="scss" scoped>
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 280rpx;

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-img {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
  }

  .custom-indicator {
    position: absolute;
    bottom: 16rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12rpx;

    .dot {
      width: 10rpx;
      height: 10rpx;
      // border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.5);
      transition: all 0.3s ease;
      transform: rotate(45deg);
    }

    .dot.active {
      width: 10rpx;
      height: 10rpx;
      background-color: #ffffff;
    }
  }
}
</style>
